<template>
  <view class="header" :style="headerStyle">
    <image v-if="headerBgSrc" :style="imgBgStyle" class="header-img-bg" :src="headerBgSrc"></image>
    <view v-else-if="isShowBg" class="gradient-bg1" :style="{top: fixedTop+'px',height: bgHeight+'rpx'}"></view>
    <u-navbar v-if="isShowNav" :class="[isTitleWhite?'title-white':'']" :placeholder="true" leftIconSize="0" :titleStyle="titleStyle" :fixed="true" :title="title" title-color="rgba(255, 255, 255, 1)" :bgColor="bgColor" :safeAreaInsetTop="true">
      <template v-if="navRightIcon" v-slot:right>
        <u-icon name="more-dot-fill" :size="navRightIcon?twentyFour:zero" color="#000"></u-icon>
      </template>
      <template v-if="navLeftIcon" v-slot:left>
        <!-- <uni-icons @click="back" v-if="navLeftIcon"  type="left" size="20" :color="leftIconColor"></uni-icons> -->
        <u-icon class="icon_left"  @click="back" v-if="navLeftIcon" name="arrow-left" size="20" :color="leftIconColor"></u-icon>
      </template>
      <template v-slot:center>
        <!-- 这里可以放置任何你想要的内容 -->
        <slot></slot>
      </template>
    </u-navbar>
  </view>
</template>

<script>
export default {
  name: 'headerNav',
  components: {
  },
  data () {
    return {
      ptop: '20',
      navRight: true,
      zero: 0,
      twentyFour: 24,
      fixedTop: 0
    };
  },
  props: {
    headerBgSrc: {
      require: true,
      type: [String],
      default () {
        return ''
      }
    },
    iconRightSrc: {
      require: true,
      type: [String],
      default () {
        return 'https://yunhaoka.vip/imgs/nav/nav-right.png'
      }
    },
    headerStyle: {
      require: false,
      default () {
        return ""
      }
    },
    imgBgStyle: {
      require: false,
      type: [Object, String],
      default () {
        return {
          height: ''
        }
      }
    },
    title: {
      require: false,
      type: [String, Number],
      default () {
        return ''
      }
    },
    titleStyle: {
      require: false,
      type: [Object],
      default () {
        return {
          fontSize: '30',
          background: 'transparent'
        }
      }
    },
    bgColor: {
      require: false,
      type: [Object, String],
      default () {
        return '#1fb0ac'
      }
    },
    isShowBg: {
      require: false,
      type: Boolean,
      default () {
        return true
      }
    },
    isTitleWhite: {
      require: false,
      type: Boolean,
      default () {
        return true
      }
    },
    navRightIcon: {
      require: false,
      type: Boolean,
      default () {
        return true
      }
    },
    navLeftIcon: {
      require: false,
      type: Boolean,
      default () {
        return true
      }
    },
    isShowNav: {
      require: false,
      type: Boolean,
      default () {
        return true
      }
    },
    titleColor: {
      require: false,
      type: String,
      default: '#fff'
    },
    leftIconColor: {
      require: false,
      type: String,
      default: '#000'
    },
    fixed: {
      require: false,
      type: Boolean,
      default () {
        return false
      }
    },
    backPath: {
      require: false,
      type: String
    },
    backType: {
      require: false,
      type: String
    },
    bgHeight: {
      require: false,
      type: [String, Number],
      default: '366rpx'
    }

  },
  computed: {},
  async mounted () {
    // #ifdef MP-WEIXIN || APP-PLUS
    let  {safeArea:{top:safeAreaTop}} = await uni.getSystemInfoSync();
    if (this.isShowNav) {
      this.fixedTop = safeAreaTop + 44
    } else {
      this.fixedTop = 0

    }
    // #endif
    // #ifdef H5
    if (this.isShowNav) {
      this.fixedTop = 44
    } else {
      this.fixedTop = 0
    }
    // #endif
  },
  methods: {
    checkboxChange () {

    },
    back () {
      if (this.backPath) {
        if (this.backType === 'switchTab') {
          uni.switchTab({
            url: this.backPath,
          })
        } else if (this.backType === 'redirectTo') {
          uni.redirectTo({ url: this.backPath })
        } else if (this.backType === 'reLaunch') {
          uni.reLaunch({
            url: this.backPath
          })
        } else if (this.backType === 'navigateTo') {
          uni.navigateTo({
            url: this.backPath,
          })
        } else {
          uni.navigateBack()
        }
      } else {
        uni.navigateBack()
      }
    }
  }
};
</script>
<style>
uni-page-head .u-icon__icon {
  font-family: 'Courier New', Courier, monospace!important;
}
</style>
<style lang="scss" scoped>
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 0.5px;
  border-radius: 100px;
  border-color: #dadbde;
  padding: 3px 7px;
  opacity: 0.8;
}

.header {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  .uni-btn-icon {
    font-family: 'Courier New', Courier, monospace!important;
  }

  .nav-image {
    width: 20rpx;
    height: 20rpx;
  }
}
.gradient-bg1{
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  height: 366rpx;
  background: linear-gradient(180deg, #1fb0ac 0%, #F5F5F5 100%);
}
</style>
<style>
.header /deep/ .uv-navbar__content__right {
  right: 20rpx !important;
  color: #000;
  font-size: 60px;
}
.title-white /deep/ .u-navbar__content__title {
  color: #fff;
}
</style>